<template>
    <!-- 内容 -->
    <div class="wrapper">
        <!-- Breadcrumb Area Start Here -->
        <div class="breadcrumb-area">
            <div class="container">
                <ol class="breadcrumb breadcrumb-list">
                    <li class="breadcrumb-item">
                        <NuxtLink to="/">Home</NuxtLink>
                    </li>
                    <li class="breadcrumb-item active">Register</li>
                </ol>
            </div>
        </div>
        <!-- Breadcrumb Area End Here -->
        <div class="login ptb-80">
            <div class="container">
              <h3 class="login-header">Create an account</h3>
               <div class="row">
                   <div class="col-xl-6 col-lg-8 offset-xl-3 offset-lg-2">
                        <div class="login-form">
                            <client-only>
                                <n-form ref="formRef" :model="registerFormValue" :rules="registerRules">
                                    <n-form-item-row label="Login account" path="account">
                                        <n-input v-model:value="registerFormValue.account" placeholder="Please enter your login account" clearable />
                                    </n-form-item-row>
                                    <n-form-item-row label="Password" path="password">
                                        <n-input v-model:value="registerFormValue.password" placeholder="Please enter your login password" clearable/>
                                    </n-form-item-row>
                                    <n-form-item-row label="Confirm Password" path="confirmPassword">
                                        <n-input v-model:value="registerFormValue.confirmPassword" placeholder="Please enter your confirm password" clearable/>
                                    </n-form-item-row>
                                    <n-form-item-row label="Name" path="name">
                                        <n-input v-model:value="registerFormValue.name" placeholder="Please enter your name" clearable/>
                                    </n-form-item-row>
                                    <n-form-item-row label="Phone">
                                        <n-input v-model:value="registerFormValue.phoneNum" placeholder="Please enter your phoneNum" clearable/>
                                    </n-form-item-row>
                                    <n-form-item-row label="Email" path="email">
                                        <n-input v-model:value="registerFormValue.email" placeholder="Please enter your email" clearable/>
                                    </n-form-item-row>
                                    <n-form-item-row label="Address">
                                        <n-input v-model:value="registerFormValue.address" placeholder="Please enter your address" clearable/>
                                    </n-form-item-row>
                                </n-form>
                                <n-button type="primary" :disabled="isLogin" :loading="isLogin" block secondary strong @click="handleValidateClick">
                                    Sign up
                                </n-button>
                            </client-only>
                        </div>
                   </div>
               </div>
            </div>
        </div>
    </div>

</template>

<script lang="ts" setup>
import {
  NConfigProvider,
  NTabs,
  NTabPane,
  NForm,
  NFormItemRow,
  NInput,
  NButton,
  useMessage
} from 'naive-ui'

    useHead({
        title: 'Login/Sign In'
    })
    const registerRules = {
        account: {
            required: true,
            message: 'Please enter your login account',
            trigger: ['input', 'blur']
        },
        name: {
          required: true,
          message: 'Please enter your name',
          trigger: ['input', 'blur']
        },
        password: {
          required: true,
          message: 'Please enter your password',
          trigger: ['input', 'blur']
        },
        confirmPassword: {
          required: true,
          message: 'Please enter your confirm password',
          trigger: ['input', 'blur']
        },
        email: {
            required: true,
            message: 'Please enter your email',
            trigger: ['input', 'blur']
        }
      }
    const registerFormValue = ref({
        account: '',
        password: '',
        confirmPassword: '',
        name: '',
        phoneNum: '',
        email: '',
        address: '',
    })
	const name = ref('');
    const formRef = ref();
    const loginFormRef = ref();
    const isLogin = ref(false)
    const message = useMessage();
    const handleValidateClick = (e: MouseEvent) => {
        e.preventDefault()
        formRef.value?.validate(async (errors) => {
          if (!errors) {
            isLogin.value = true;
            const { code, data, error, msg } = await $https({
                method: "POST",
                url: 'clientWeb/register',
                body: registerFormValue.value
            })
            console.log(data, message)
            if (code === 200) {
                isLogin.value = false;
                message.success("Registered successfully !"); 
                setStorage('userInfo', data, 10); // 用户注册并登录存储十天
                window.location.href = '/user'
            } else {
                isLogin.value = false;
                let text = error ? error[0] : msg
                message.error(`${text}`);
            }
          } else {
            console.log(errors)
          }
        })
    }
</script>

<style scoped></style>
